$(function () {
    // alert(1)
    // 1.功能1.轮播图列表
    // 效果：将轮播图的图片列表展示到页面
    // 封装函数，获取数据
    initSwiperList()

    function initSwiperList() {
        $.ajax({
            method: "get",
            url: '/admin/swipers',
            success(res) {
                // console.log(res);
                // 判断
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                // layui.layer.msg(res.message, { icon: 6 })
                // 渲染数据到页面
                // 生成模板字符
                let htmlStr = template('swiper_list', res)
                $('tbody').html(htmlStr)
                let span = $('tbody').find('span')

            }
        })
    }
    // 功能2：上传图片
    // 点击上传图片，调用上传文件的点击事件/
    $('#uploadSwiper').on('click', function () {
        $('#myfile').click()
    })
    // 判断用户要已经选择完文件
    $('#myfile').on('change', function () {
        // console.log(this.files);
        // 使用formData收集表单数据
        let fd = new FormData()
        // 获取文件选择框选中的文件
        let fileList = this.files
        // console.log(fileList);
        // console.log(fileList.length);

        //如果用户选择文件小于等于5个可以直接添加
        if (fileList.length > 5) {
            return layui.layer.msg('一次性上传图片不能超过5张,请从新选择!', {
                icon: 7
            })
        }
        for (let i = 0; i < fileList.length; i++) {
            fd.append('swipers', fileList[i])
        }
        if (fileList.length <= 0) {
            return
        }
        // console.log(typeof fd.swpers);
        // fd.forEach((item, value, array) => {
        //     console.dir(item);
        //     console.dir(value);
        //     console.log(array);
        // })
        $.ajax({
            method: 'post',
            url: '/admin/swipers',
            data: fd,
            contentType: false,
            processData: false,
            success(res) {
                console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                layui.layer.msg(res.message, {
                    icon: 6
                })
                initSwiperList()
            }
        })
    })


    // ----------------
    // 功能3：禁用/启用轮播图
    // 封装函数,根据span的状态,渲染不同的样式

    // 点击状态按钮，切换属性值，1表示启用，2表示禁用
    //  状态按钮是动态生成的,要采用事件委托的方式添加事件
    $('tbody').on('click', '.layui-badge', function () {
        // console.log(1);
        let id = $(this).attr('data-id')
        // console.log(id);
        let status = $(this).attr('data-status')
        // console.log(typeof status);
        if (status == 1) {
            status = 2
        } else if (status == 2) {
            status = 1
        }
        status = parseInt(status)
        // console.log(typeof status);
        console.log(status);

        $.ajax({
            method: 'put',
            url: '/admin/swipers/' + id,
            data: {
                status: status
            },
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                layui.layer.msg(res.message, {
                    icon: 6
                })
                // 重新获取数据,渲染页面
                initSwiperList()

            }
        })
    })


    // ----------------------
    // 功能4:删除轮播图
    // 效果:点击删除按钮,删除当前行的图片
    $('tbody').on('click', '#delete', function () {
        // console.log(11);
        //获取到点击按钮的id
        let id = $(this).attr('data-id')
        // console.log(id);
        //发送请求
        layui.layer.confirm('确定要吗删除吗？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            $.ajax({
                method: 'delete',
                url: '/admin/swipers/' + id,
                success(res) {
                    console.log(res);
                    if (res.status !== 0) {
                        return layui.layer.msg(res.message, {
                            icon: 5
                        })
                    }
                    layui.layer.msg(res.message, {
                        icon: 6
                    })
                    // 重新获取数据,渲染页面
                    initSwiperList()
                    layui.layer.close(index)
                }
            })
        })

    })


})